<template>
    <el-dialog width="24vw" class="flex-dialog" v-model="info.visible" @close="handleClose"  >
        <template #header>
            <div style="font-size:var(--18FontSize); font-weight:500; color:#525866;">{{ info.forEdit ? '编辑周期' : '新增周期' }}</div>
        </template>
        <el-form ref="myForm" class="flex-form" :model="form" :rules="rules" label-position="top">
            <el-form-item label="周期名称" prop="cycleName">
                <FlexInput :data="{ paramKey:'cycleName' }" :form="form" />
            </el-form-item>
            <el-form-item label="周期间隔" prop="intervalCycle">
                <FlexInput :data="{ paramKey:'intervalCycle', append:getAppend }" :form="form" />
            </el-form-item>
            <el-form-item label="提前推送" prop="forwardPushDay">
                <FlexInput :data="{ paramKey:'forwardPushDay', suffix:()=>'天' }" :form="form"  />
            </el-form-item>   
        </el-form>
        <template #footer>
            <div style="display:flex; gap:var(--mPadding); ">
                <div class="flex-btn middle opacity" style="flex:1;" @click="handleClose">取消</div>
                <div class="flex-btn middle" style="flex:1;" @click="handleSubmit">确认</div>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>
    import { watch, ref, reactive, nextTick, h } from 'vue';
    import { addOrUpdateCycle, delCycle } from '@/api/cycle.js';
    import FlexInput from '@/components/FlexInput.vue';
    import FlexSelect from '@/components/FlexSelect.vue';
	import { ElMessage, ElPopconfirm, ElInput  } from 'element-plus'
    const props = defineProps({
        info:{ type:Object },
        timeList:{ type:Array }
    });
    const emit = defineEmits(['update:info', 'refresh']);
    const machList = ref([]);
    const myForm = ref(null);
    const form = reactive({
        cycleName:'',
        intervalCycle:'',
        timeType:2,
        forwardPushDay:''
    });

    const rules = reactive({
        cycleName:[{ required:true, message:'名称不能为空',  trigger:'blur' }],
        intervalCycle:[{ required:true, message:'请设置周期间隔',  trigger:'blur' }, { validator:checkIsInt, trigger:'blur' }],
        forwardPushDay:[{ validator:checkIsInt, trigger:'blur'  }]
    });
    function getAppend(){
        return h(FlexSelect, { payload:props.timeList, data:{ paramKey:'timeType' }, form })
    }
    function checkIsInt(rule, value, callback){
        let _val = Number(value);
        if ( isNaN(_val) ) {
            callback(new Error('请输入数值'));
            return;
        }
        if ( _val >= 0 && Number.isInteger(_val) ) {
            callback();
        } else {
            callback(new Error('请输入正整数'));
        }
    }
    function checkIsPosInt(rule, value, callback){
        let _val = Number(value);
        if ( isNaN(_val) ) {
            callback(new Error('请输入数值'));
            return;
        }
        if ( _val > 0 && Number.isInteger(_val) ) {
            callback();
        } else {
            callback(new Error('请输入正整数'));
        }
    }
    
    // 重置状态
    function handleClose(){
        Object.keys(form).forEach(key=>{
            form[key] = key === 'timeType' ? 2 : '';
        })
        myForm.value.clearValidate();
        props.info.visible = false;  
    }
    function handleSubmit(){
        if ( myForm.value ) {
            myForm.value.validate(valid=>{
                if ( valid ){
                    let obj = { ...form };
                    if ( props.info.forEdit ) {
                        obj.cycleId = props.info.row.cycleId;
                    }
                    addOrUpdateCycle(obj, props.info.forEdit)
                    .then(res=>{
                        if ( res.data.code === 200 ){
                            ElMessage({
                                type:'success',
                                message:`${props.info.forEdit ? '更新' : '新增'}周期成功`
                            });
                            handleClose();
                            emit('refresh');
                        }
                    })
                }
            })
        }
    }
    watch(()=>props.info, ()=>{
        // 编辑模式，填充表单
        if ( props.info.forEdit ) {
            Object.keys(form).forEach(key=>{
                form[key] = props.info.row[key];
            })
        }
    })
</script>
